<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<title>后台管理-登陆</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="referrer" content="never">
	<link rel="icon" href="assets/images/favicon.ico">
	<link rel="stylesheet" href="assets/lib/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="assets/css/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
	<link rel="stylesheet" href="assets/css/login.min.css" media="all">
</head>

<body>
	<img src="http://img.club.pchome.net/kdsarticle/2014/04/21/96382cfffd6b39f690d203761858ebda.jpg" class="background" />
	<canvas id="drawStars" maxStars="1000" class="drawStars"></canvas>
	<div class="login-container">
		<div class="login-form">
			<form class="layui-form" action="" lay-filter="login">
				<div class="logo-item">
					<img src="assets/images/logo.png" width="40px" height="40px" />
					<span>后台登录</span>
				</div>
				<div class="layui-form-item">
					<label class="layui-icon layui-icon-username" for="user"></label>
					<input type="text" name="user" id="user" lay-verify="required|user" placeholder="用户名/手机号码/邮箱" lay-reqText="请输入用户名/手机号码/邮箱" autocomplete="off" maxlength="50" class="layui-input">
				</div>
				<div class="layui-form-item">
					<label class="layui-icon layui-icon-password" for="pass"></label>
					<input type="password" name="pass" id="pass" lay-verify="required|pass" placeholder="密码" lay-reqText="请输入密码" autocomplete="off" maxlength="20" class="layui-input">
				</div>
				<div class="layui-form-item captcha-item">
					<label class="layui-icon layui-icon-vercode" for="captcha"></label>
					<input type="text" name="captcha" lay-verify="required|captcha" placeholder="图形验证码" lay-reqText="请输入图形验证码" autocomplete="off" maxlength="6" class="layui-input captcha-input">
					<div class="captcha-img">
					</div>
				</div>
				<div class="layui-form-item">
					<input type="checkbox" name="remember" value="0" lay-skin="primary" title="记住密码">
				</div>
				<div class="layui-form-item">
					<button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="login">登 入</button>
				</div>
			</form>
		</div>
	</div>
	<script src="assets/lib/layui/layui.js" charset="utf-8"></script>
	<script src="assets/js/lay-config.js" charset="utf-8"></script>
	<script src="assets/js/drawStars.min.js" charset="utf-8"></script>
	<script src="assets/js/public.min.js" charset="utf-8"></script>
	<script type="text/javascript">
		layui.use(['jquery', 'layer', 'form'], function() {
			var $ = layui.jquery,
				layer = layui.layer,
				form = layui.form;

			// 登录提交
			form.on('submit(login)', function(data) {
				var field = data.field;

				if (field.user == '') {
					layer.msg('用户名不能为空');
				} else if (field.pass == '') {
					layer.msg('密码不能为空');
				} else if (field.captcha == '') {
					layer.msg('验证码不能为空');
				} else {
					// $('form input[type="password"]').prop('disabled', true); // 防止浏览器记住密码
					lianyi.request({
						url: lianyi.api({ m: 'login', c: 'login' }),
						data: field,
						msg: '登录中...',
						success: function(res) {
							localStorage.setItem('user', field.user);
							localStorage.setItem('pass', field.remember === '1' ? field.pass : '');
							localStorage.setItem('remember', field.remember || '');
						},
						fail: function(res) {
							var msg = res.msg;
							if (msg && /验证码.*已过期/.test(msg)) { //验证码过期
								$('#captcha').click();
								$('input[name="captcha"]').val('').focus();
							}
						},
						complete: function() {
							// $('form input[type="password"]').prop('disabled', false);
						}
					});
				}
				return false;
			});

			// 设置lable图标颜色
			function setIconColor() {
				$('form input[name]').each(function(i, v) {
					$(this).prev().css('color', $(this).val() === '' ? '#d2d2d2' : '#00ffff');
				});
			}

			$('form input[name]').on('input propertychange', function() {
				var val = $(this).val();

				switch ($(this).attr('name')) {
					case 'user':
						if (/[^a-zA-Z0-9\_\-@\.]/.test(val))
							$(this).val(val.replace(/[^a-zA-Z0-9\_\-@\.]/, ''));
						break;
					case 'pass':
						if (/[^a-zA-Z0-9\_\,\.\:\;]/.test(val))
							$(this).val(val.replace(/[^a-zA-Z0-9\_\,\.\:\;]/, ''));
						break;
					case 'captcha':
						if (/[^a-zA-Z0-9]/.test(val))
							$(this).val(val.replace(/[^a-zA-Z0-9]/, ''));
						break;
				}
				setIconColor();
			});

			$('.captcha-img')
				.html('<img id="captcha" src="' + lianyi.api({ m: 'login', c: 'captcha' }) + '" alt="图形验证码" />')
				.children('img').on('click', function() {
					$(this).attr('src', lianyi.api({
						m: 'login',
						c: 'captcha',
						_t: Math.random()
					}));
				});

			$(document).ready(function() {
				var user = localStorage.getItem('user'),
					pass = localStorage.getItem('pass'),
					remember = localStorage.getItem('remember');

				$('form input[name="remember"]').val(remember);

				form.val('login', {
					user: user || '',
					pass: pass || '',
					remember: remember === '1'
				});

				setIconColor();
			});
		});
	</script>
</body>

</html>